import React, { createRef, PureComponent } from 'react'
import { SwitchTransition, CSSTransition } from 'react-transition-group'
import './Csstransition.css'
export class App extends PureComponent {
  constructor(props) {
    super(props)
    this.state = {
      isLogin: true
    }
    this.nodeRef = createRef()
  }
  toggle(){
    this.setState({
      isLogin: !this.state.isLogin
    })
    console.log(this.nodeRef.current)
  }
  render() {
    const { isLogin } = this.state
    return (
      <div>
        <h1>SwitchTransition动画</h1>
        <div>
          <SwitchTransition mode='out-in'>
            <CSSTransition 
            nodeRef={this.nodeRef}
            key={isLogin ? 'login' : 'logout'}  // 根据key值判断是进入还是退出
            classNames={'show'} 
            timeout={1000}> 
              <div>
                {isLogin ? <button 
                ref={this.nodeRef}
                onClick={() => this.toggle()}>登录</button> : <button 
                ref={this.nodeRef}
                onClick={() => this.toggle()}>退出</button>
                }
              </div>
            </CSSTransition>
          </SwitchTransition>
          {/* 
            SwitchTransitions适用于两个组件之间切换
              mode: 'out-in'  先退出再进入 (默认) | 'in-out' 先进入再退出
              里面必须包裹 CSSTransition
              key: 根据key值判断是进入还是退出
              classNames: 自定义类名
              timeout: 动画时长
              nodeRef: 获取节点
          */}
        </div>
      </div>
    )
  }
}

export default App